<template>
	<div class="div">
		<div class="login">
			<h3>LOGIN</h3>
			<input class="box" type="text" placeholder="请输入手机号" v-model="user.username">
			</input>
			<input class="box" type="password" placeholder="请输入密码" v-model="user.password">
			</input>
			<p>
				<el-checkbox style="display: flex; margin-left: 20%;" label="记住账号" v-model="isRemember"></el-checkbox>
			</p>
			<p>
				<button @click="login()">登录</button>
			</p>
		</div>
	</div>
</template>

<script>
	import qs from 'qs'
	export default {
		name: 'Login',
		data() {
			return {
				user: {
					username: '',
					password: ''
				},
				isRemember: false
			}
		},
		mounted() {
			if (this.$store.state.token != null) {
				this.login()
			}
		},
		methods: {
			login() {
				let kv = qs.stringify(this.user)
				this.$axios.post("/api/login", kv).then((resp) => {
					let token = resp.data.data.token;
					window.localStorage.setItem("token", token);
					//获取 token
					//带上token
					token = "Bearer " + token;
					let h = {
						headers: {
							'Authorization': token,
						}
					}
					this.$store.state.token = h
					this.$axios.get("/api/user/info", h).then((resp) => {
						this.$store.state.role = resp.data.data.role;
						this.$store.state.name = resp.data.data.name;
						this.$store.state.account = resp.data.data.account;
						this.$store.state.pic = resp.data.data.img;
						let now = new Date();
						let year = now.getFullYear();
						let month = now.getMonth() + 1;
						let day = now.getDate();
						this.today=year + "-" + month + "-" + day;
						this.$store.state.today='';
						this.$store.state.today=this.today;
						if(resp.data.data.role == 'usr') {
							this.$router.go(-1)
						}
						if(resp.data.data.role == 'adm') {
							this.$router.push({
								path: '/adm/img'
							});
						}
					})
				})
			},
		}
	}
</script>

<style scoped>
	.div {
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url("../../assets/img/mobile/background.jpg");
		background-size: 100% 100%;
	}

	.login {
		width: 70%;
		height: 60%;
		opacity: 0.8;
		background-color: rgba(136, 174, 200, 1.0);
		border-radius: 2rem;
		text-align: center;
		align-items: center;
	}

	.login h3 {
		margin-top: 4rem;
		margin-bottom: 2rem;
		font-size: 3rem;
		color: white;
	}

	.box {
		border: 0;
		width: 60%;
		font-size: 1rem;
		color: #fff;
		background: transparent;
		border-bottom: 2px solid #fff;
		padding: 0.5rem 1rem;
		outline: none;
		margin: 1rem;
	}

	button {
		margin-top: 3rem;
		width: 60%;
		height: 2.5rem;
		border-radius: 0.5rem;
		border: 0;
		color: #fff;
		text-align: center;
		/* line-height: 30px; */
		font-size: 1.3rem;
		background-image: linear-gradient(to right, #4d647d, #37516c);
		font-family: Georgia, serif;
	}
</style>